<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 图标 - 实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/icons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字图标-->
	<link href="../css/font-awesome.css?ver=v2.3" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<fieldset class="mt20">
<legend>黑色图标：</legend>
<i class="icon icon-search"></i> icon-search
<i class="icon icon-trans"></i> icon-trans
<i class="icon icon-home"></i> icon-home
<i class="icon icon-link"></i> icon-link
<i class="icon icon-warning"></i> icon-warning
<i class="icon icon-info"></i> icon-info
<i class="icon icon-refresh"></i> icon-refresh
<i class="icon icon-chart"></i> icon-chart
<i class="icon icon-pie"></i> icon-pie
<i class="icon icon-location"></i> icon-location <br>

<i class="icon icon-set"></i> icon-set
<i class="icon icon-list"></i> icon-list
<i class="icon icon-email"></i> icon-email
<i class="icon icon-telephone"></i> icon-telephone
<i class="icon icon-image"></i> icon-image
<i class="icon icon-album"></i> icon-album
<i class="icon icon-attchment"></i> icon-attchment
<i class="icon icon-file"></i> icon-file
<i class="icon icon-folder"></i> icon-folder
<i class="icon icon-pencile"></i> icon-pencile <br>
<i class="icon icon-user"></i> icon-user
<i class="icon icon-people"></i> icon-people
<i class="icon icon-lock"></i> icon-lock
<i class="icon icon-key"></i> icon-key
<i class="icon icon-global"></i> icon-global
<i class="icon icon-cart"></i> icon-cart
<i class="icon icon-plane"></i> icon-plane
<i class="icon icon-clock"></i> icon-clock
<i class="icon icon-message"></i> icon-message
<i class="icon icon-calendar"></i> icon-calendar <br>
<i class="icon icon-dropdown"></i> icon-dropdown<br>
注：以上图标都有对应的白色图标，调用白色图标时只须后面加个2，如：icon-search2。<br><br>

<i class="icon icon-share"></i> icon-share
<i class="icon icon-pass"></i> icon-pass
<i class="icon icon-delete"></i> icon-delete
<i class="icon icon-money"></i> icon-money
<i class="icon icon-success"></i> icon-success
<i class="icon icon-question"></i> icon-question
<i class="icon icon-add"></i> icon-add
<span class="bg-color-danger"><i class="icon icon-power"></i></span> icon-power<br>
<i class="icon icon-arrow-up"></i> icon-arrow-up
<i class="icon icon-arrow-down"></i> icon-arrow-down
<i class="icon icon-arrow-left"></i> icon-arrow-left
<i class="icon icon-arrow-left icon-arrow-left-disabled"></i> icon-arrow-left-disabled
<i class="icon icon-arrow-right"></i> icon-arrow-right
<i class="icon icon-arrow-right icon-arrow-right-disabled"></i> icon-arrow-right-disabled

<i class="icon icon-close"></i> icon-close
</fieldset>

<fieldset class="mt20">
<legend>fontawesome字体图标：</legend>
<i class="fa fa-search color-red"></i> fa-search
<i class="fa fa-list color-blue"></i> fa-list 
<i class="fa fa-weixin color-green"></i> fa-weixin<br>
更多图标详见：<a href="http://fontawesome.io/icons/" target="_blank">http://fontawesome.io/icons/</a> (官方)<br>
中文翻译：<a href="http://www.bootcss.com/p/font-awesome/" target="_blank">http://www.bootcss.com/p/font-awesome/</a>
</fieldset>
</div>
</body>
</html>